<template>
	<div class="main_content_1">

		<div class="operation">

			<div class="middle">

				<span style="margin-right: 1.25rem;">状态</span>
				<el-radio-group v-model="radio">
					<el-radio  label="0" @change="ChangeOder()">未开始</el-radio>
					<el-radio  label="1" @change="ChangeOder()">进行中</el-radio>
					<el-radio  label="2" @change="ChangeOder()">已结束</el-radio>
				</el-radio-group>
			</div>
			

			<div class="body">
				<el-row :gutter="20">
					<el-col :span="6" v-for="(Item,index) in studentStak" :key="index" v-show="Item.taskStatus==radio">
						<div class="grid-content">
							<div class="grid-content_1">

								<div style="display: flex;justify-content: space-between;"><span>{{Item.taskName}}</span></div>
								<div>开始时间:{{Item.startTime}}</div>
								<div>结束时间:{{Item.closeTime}}</div>
								<div v-if="Item.taskStatus==0">任务状态:未开始</div>
								<div v-if="Item.taskStatus==1">任务状态:进行中</div>
								<div v-if="Item.taskStatus==2">任务状态:已结束</div>
								
								<div style="display: flex;justify-content: flex-end;">

									<el-button style="background-color:#ffab03;color: white;" round size="small" v-if="Item.taskStatus==1&&Item.isSubmit" @click="$router.push({'name':'Editjobstu',params:{testid:Item}})">编辑</el-button>
									<el-button round size="small" v-if="Item.taskStatus==2&&!Item.isSubmit" style="background-color:#03D3BD;color: white;">未交</el-button>
									<el-button round size="small" v-if="Item.taskStatus==2&&Item.isSubmit" style="background-color:#03D3BD;color: white;">完成</el-button>
									<el-button round size="small" v-if="Item.taskStatus==2&&Item.isSubmit&&Item.showTheAnswerAfterReview" style="background-color:#ffab03;color: white;" @click="Workcorrecting(Item.testRecordId)" >查看</el-button>
									<el-button type="warning" round size="small" v-if="Item.taskStatus==1&&!Item.isSubmit"  style="background-color:#03D3BD;color: white;border: none;" @click="$router.push({'name':'Viewjobstu',params:{testid:Item}})">做作业</el-button>

								</div>
							</div>
						</div>
					</el-col>
				</el-row>

              	<el-pagination background layout="prev, pager, next" :total="1000" :current-page="currentPage"
				@current-change="currentChange" style="margin-top: 1.25rem;">
				</el-pagination>
			</div>
		</div>
	</div>

</template>

<script>
	import {
		HttpManagerStudent
	}from"../../../../request/student.js"
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				radio:"0",
				search: "",
				list: [{
					title: "新建作业",
					numberPeople: 52,
					time: "07-28 17:00",
					isshow: false,
				}],
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '全部班级',
				dialogVisible: false,
				value1: '',
				courseStudentId:localStorage.getItem("ClassId"),
				studentStak:[],
				currentPage:1
			}
		},
		methods: {
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
				// params参数：文件夹id、搜索的值、是否逆序
				// this.files = await axios.get('/files', { params: this.formData })
			},
			correcting() {
				alert(1);
				this.$router.push('/correcting');
			},
			newjob() {
				this.$router.push('/Newjob');
			},
			database() {
				this.$router.push('/database');
			},
			Edit() {
				
				this.$router.push('/Workcorrecting1');
			},
			getTaskByCourseIdStudent()
			{
				// alert(this.courseStudentId);
				var params={
					courseId:this.courseStudentId,
					pageNum:this.currentPage,
				}
				HttpManagerStudent.getTaskByCourseIdStudent(params).then(e=>{
					console.log(e);
					this.studentStak=e.data.data;
				})
			},
			Workcorrecting(id)
			{
				localStorage.setItem("test_record",id);
				this.$router.push("/AnswerRecord");
			},
			currentChange(id)
			{
              this.currentPage=id;
			  this.getTaskByCourseIdStudent();
			},
			ChangeOder(){
			  this.currentPage=1;
			  this.getTaskByCourseIdStudent();
			}
			
		},
		created()
		{
			this.getTaskByCourseIdStudent();
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main_content_1 {
		margin-left: 20px;
		margin-right: 1.25rem;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		margin-left: 0.625rem;
		margin-right: 1.25rem;

		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #ffffff;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #03d3bd;
				}

				&:focus {
					border-color: #03d3bd;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03d3bd;
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #03d3bd;
				}
			}
		}
	}

	.el-row {
		margin-top: 1.25rem;
	}

	.operation {
		width: 100%;
		height: 100%;
		margin-top: 2.875rem;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		border-radius: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;
	}

	// .header1 {
	// 	width: 100%;
	// 	height: 100px;
	// 	display: flex;
	// 	align-items: center;
	// 	position: relative;
	// 	border-bottom: 1px solid #f2f6fc;
	// }

	.header1 button {
		height: 40px;
		width: 100px;
		outline: none;
		border: inherit;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
		border-radius: 40px;
		margin-left: 20px;
		cursor: pointer;
	}

	.header1 button i {
		margin-right: 5px;
		font-weight: bold;
	}

	.header1 .el-input {
		position: absolute;
		right: 0;
		width: 200px;
		border-radius: 30px;
		margin-right: 50px;
	}

	.middle {
		/* border: 1px solid; */
		height: 40px;
		padding-left: 30px;
	}

	.middle .el-input {
		width: 200px;
	}

	.body {
		flex: 1;
		padding: 0 30px;
		// margin-top: 1.875rem;
	}

	.body li {
		list-style: none;
		display: block;
		height: 80px;
		display: flex;
		border-radius: 10px;
	}

	.body li:hover {
		background-color: #f7fafc;
	}

	.body li div {
		flex: 1;
		display: flex;
	}

	.body .left {
		flex-direction: column;
		justify-content: center;
	}

	.body .left p {
		color: #abbde2;
	}

	.body .right {
		align-items: center;
	}

	.body .right .show {
		display: flex;
		justify-content: center;
	}

	.body .right .show span {
		color: #616eff;
		margin: 10px;
	}

	.body .right button {
		height: 40px;
		width: 60px;
		outline: none;
		border: inherit;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
		border-radius: 40px;
		margin-left: 30px;
		cursor: pointer;
	}

	.body .right span {
		display: flex;
		align-items: flex-end;
	}

	.body .right span p {
		font-size: 10px;
	}

	.grid-content {
		height: 17.25rem;
		width: 100%;

		background-color: #efefef;
	}

	.grid-content_1 {
		box-sizing: border-box;
		margin: 1.875rem;
		overflow: hidden;
	}


	.grid-content_1>div {
		margin-top: 1.6rem;
	}

	// .el-button{
	// 	margin-left: 1.5rem;
	// }
</style>
